<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>部门添加/修改</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<link rel="stylesheet" th:href="@{/css/animate.min.css}">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_1179208_6sxekl4z8m7.css">
</head>

<body>
<div class="z-body animated fadeIn">
	<form action="" method="post" class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<label for="deptName" class="layui-form-label">
				部门名称
			</label>
			<div class="layui-input-block">
				<input type="text" id="deptName" name="deptName" th:value="${dept?.deptName}"
					   lay-verify="required" lay-vertype="tips"
					   autocomplete="off" placeholder="请输入部门名称" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">
				所属部门
			</label>
			<div class="layui-input-block">
				<div class="layui-unselect layui-form-select" id="parentNameDiv">
					<div class="layui-select-title">
						<input type="text" id="parentName"
							   placeholder="请选择" class="layui-input layui-unselect" readonly>
						<input type="hidden" name="parentId" id="parentId">
						<i class="layui-edge"></i>
					</div>
				</div>
				<div class="layui-card dtree-select" id="parentTreeDiv">
					<div class="layui-card-body">
						<div id="toolbarDiv">
							<ul id="parentTree" class="dtree" data-id="0" style="width: 100%;"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block" style="margin-left:0;text-align:center;">
				<input type="hidden" name="deptId" th:value="${dept?.deptId}">
				<input type="hidden" name="orderNum" th:value="${dept?.orderNum}">
				<button class="layui-btn layui-btn-blue" th:text="${dept}?'修改':'增加'" lay-submit=""
						data-th-lay-filter="${dept}?'edit':'add'">增加
				</button>
			</div>
		</div>
	</form>
</div>
<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script>
    layui.config({
        base: '/lib/layui/extend/'
    }).use(['form', 'layer', 'autocomplete', 'dtree', 'iconPicker'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            dtree = layui.dtree;


        var MenuDTree = dtree.render({
            elem: "#parentTree",
            url: "/dept/tree/root",
            dataStyle: "layuiStyle",
            method: "GET",
            dot: false,     // 圆点是否显示
            accordion: true,
            menubar: true,
            response: {
                statusName: "status",
                statusCode: 0,
                message: "message",
                treeId: "deptId",
                parentId: "parentId",
                title: "deptName"
            },
            done: function (response, obj) {
                var parentId = getQueryString('parentId') ? getQueryString('parentId') : [[${dept?.parentId + ''}]];
                var parent = MenuDTree.getParam(parentId);
                if (parent) {
                    $("#parentName").val(parent.context);
                    $("#parentId").val(parent.nodeId);
                }
            }
        });

        $("#parentName").on("click", function () {
            $(this).toggleClass("layui-form-selected");
            $("#parentTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        dtree.on("node(parentTree)", function (obj) {
            console.log(obj);
            $("#parentName").val(obj.param.context);
            $("#parentId").val(obj.param.nodeId);
            $("#parentNameDiv").toggleClass("layui-form-selected");
            $("#parentTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        //监听提交
        form.on('submit(add)', function (form) {
            $.post('/dept', form.field, function (result) {
                handlerResult(result, addDone);
            });
            return false;
        });

        //监听提交
        form.on('submit(edit)', function (form) {
            form.field._method = 'PUT';
            $.post('/dept', form.field, function (result) {
                handlerResult(result, editDone);
            });
            return false;
        });


        function addDone(data) {
            console.log("add result id : ", data);
            layer.msg("添加成功", {icon: 6});
        }

        function editDone(data) {
            console.log("edit result id : ", data);
            layer.msg("修改成功", {icon: 6});
        }
    });
</script>
</body>

</html>